<template>
  <div class="home">
    <h2>当前计数:{{ $store.state.counter }}</h2>
    <!-- <button @click="changeName">修改name</button> -->
    <button @click="incrementAction">修改name</button>
  </div>
</template>

<script>
//  import { mapActions } from 'vuex';
// export default {
//   //Action提交的是mutation，而不是直接变更状态
//   //Action可以包含任意异步操作；
//   methods: {
//     // changeName() {
//       // this.$store.dispatch('incrementAction',{number:100})
//       // this.$store.dispatch({
//       //   type:'incrementAction',
//       //   number:100
//       // })
//         ...mapActions(['incrementAction'])
//     // },
//   },
// }
</script>

<script setup>
import { useStore, mapActions } from 'vuex'

const store = useStore()

// 1.在setup中使用mapActions辅助函数
const actions = mapActions(['incrementAction', 'changeNameAction'])
const newActions = {}
Object.keys(actions).forEach((key) => {
  newActions[key] = actions[key].bind({ $store: store })
})
const { incrementAction, changeNameAction } = newActions
</script>

<style scoped></style>
